<template>
  <div class="app-container">
    <el-form>
      <el-input @keyup.enter.native="toSearch" v-model='listQuery.searchName' clearable placeholder='请输入问题内容/反馈者' style='width: 250px;'></el-input>
      <el-date-picker
        format='yyyy-MM-dd'
        v-model="listQuery.startTime"
        type="datetime"
        placeholder="选择日期(开始)">
      </el-date-picker>
      <el-date-picker
        format='yyyy-MM-dd'
        v-model="listQuery.endTime"
        type="datetime"
        placeholder="选择日期(结束)">
      </el-date-picker>
      <el-button class="search" type='success' icon='el-icon-search' @click="toSearch">搜索</el-button>
    </el-form>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="1">
        </el-tab-pane>
        <el-tab-pane label="未查看" name="2">
        </el-tab-pane>
        <el-tab-pane label="已阅" name="3">
        </el-tab-pane>
      </el-tabs>
      <feedback-table :listQuery="listQuery" :feedbackList="feedbackList"></feedback-table>
    </div>
  </div>
</template>
<script>
import { toGetFeedbackList } from '@/api/feedback'
import feedbackTable from './feedbackTable.vue'
export default {
  components: {
    feedbackTable
  },
  data() {
    return {
      listQuery: {
        listLoading: false,
        searchName: '',
        startTime: '',
        endTime: '',
        limit: 10,
        total: 1,
        type: 1
      },
      listLoading: false,
      activeName: '1',
      feedbackList: [
        { id: 1, title: '六一有优惠活动吗？', time: '2018-06-01 09:10:10', status: '未查看' }
      ]

    }
  },
  created() {
    this.getFeedbackList()
  },
  methods: {
    getFeedbackList() {
      this.listLoading = true
      toGetFeedbackList(this.listQuery).then(res => {
        this.feedbackList = res.data.data.data
        this.listQuery.total = res.data.data.total
        this.listLoading = false
      })
        .catch(err => {
          console.log(err)
        })
    },
    toSearch() {
      this.getFeedbackList()
    },
    handleClick(tab, event) {
      //      this.activeName = tab.name
      //      if (this.activeName == '1') {
      //        this.listQuery.type = 1 // 切换子主键的名称
      //      } else if (this.activeName == '2') {
      //        this.listQuery.type = 2
      //      } else {
      //        this.listQuery.type = 3
      //      }
      this.listQuery.type = tab.name // 切换子主键的名称
      this.listQuery.searchName = null // 切换子主键时将条件清空
      this.listQuery.startTime = null
      this.listQuery.endTime = null
      this.getFeedbackList()
    }
  }
}
</script>
<style>

</style>
